<div>
  <h2>angular中的数据绑定，指令，事件，管道，双向数据绑定</h2>
  <h4>数据绑定：{{title}}</h4>
  <p [title]="desc">属性绑定</p>
  <h4>简单运算：{{1+1}}</h4>
  <h4>列表循环</h4>
  <ul>
    <li *ngFor="let item of list">{{item}}</li>
  </ul>
  <ul>
    <li *ngFor="let item of json;let key = index">{{item.name}}-{{item.sex}}-{{item.age}}-{{key}}</li>
  </ul>
  <h4>引入图片</h4>
  <img src="assets/images/1.jpg" height="200" alt="">
  <img [src]="bdLogo" alt="">
  <h4>[ngClass]和[ngStyle]</h4>
  <p [ngClass]="{'red': true,'orange':false}">[ngClass]和[ngStyle]</p>
  <ul>
    <li *ngFor="let item of json;let key = index" [ngClass]="{'red': key==0,'orange':key==1}">
      {{item.name}}-{{item.sex}}-{{item.age}}-{{key}}</li>
  </ul>
  <h4>管道</h4>
  <p>date时间格式化过滤器：{{ today | date: "yyyy-MM-dd HH:mm:ss" }}</p>
  <p>currency货币过滤器：{{ money | currency:"RMB ¥" }}</p>
  <p><a href="https://www.cnblogs.com/webloo/p/4798171.html">更多参考博客</a></p>

  <h4>事件</h4>
  <p><button (click)="hundleClick()">点我</button></p>
  <p>{{title}}</p>
  <p><button (click)="setData()">改变title</button></p>
  <h4> 双向数据绑定</h4>
  <p>{{keywords}}</p>
  <p><input type="text" [(ngModel)]="keywords" /></p>

</div>